<template>
	<view class="pop-wrap__share" 
			@touchmove.stop.prevent="moveHandle"  :animation='animationData'
			@click.stop="closeShare(false)"
			>
			<view @click.stop="closeShare(true)" class="pop-wrap__con">
				<image class="pop-title__close" src="../static/common/icon_31.png" ></image>
				<view class="pop-desc" >
					<view class="pop-desc__tip">请点击右上角</view>
					<view class="pop-desc__tip">通过【发送给朋友】</view>
					<view class="pop-desc__tip">邀请好友购买</view>
				</view>
		</view>
	</view>
</template>

<script>
	// 中间弹出的遮罩层
	export default{
		props:{
			isShare: Boolean,
			title: String,
			text: String
		},
		
		data() {
			return{
				animationData: {},
			}
		},
		
		mounted() {
			console.log('isShare:' + this.isShare);
		},
		
		methods:{
			closeShare(status) {
				this.$emit('closeShare', status)
			}
		},
		
		watch:{
			isShare: function() {
				console.log('isShare: ' + this.isShare);
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction:'ease-out'
				})
				if(this.isShare) {
					this.animationData = animation.opacity(1).left(0).scale(1,1).step().export()
				}else{
					this.animationData = animation.opacity(0).left('100%').scale(0,0).step().export()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../app.less');
	.pop-wrap__share{
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: -100%;
		width: 100%;
		height: 100%;
		opacity: 0;
		top:0;
		.flex-base;
		align-items: flex-end;
		justify-content: flex-start;
		flex-direction: column;
		z-index: 9999;
		.pop-wrap__con{
			width: 100%;
			.flex-base;
			align-items: flex-end;
			justify-content: flex-start;
			flex-direction: column;
		}
		.pop-title__close{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			animation: skip 0.5s ease-out;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
		@keyframes skip{
			0% { transform: translateZ(0); }
			100% { transform: translateY(15px); }
		}
		.pop-desc{
			width: 100%;
			color: #fff;
			font-weight: bold;
			font-size: 35px;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}
	
</style>
